<template>
	<div style="width: 100%;position:relative;" >
		<img src="../../assets/images/merchants/bg@2x.png" alt="" style="width:100%;">
		<div style="width:700px;height:500px;background-color:#fff;position:absolute;top:100px;left:30%;">
			<div class="title"><span>{{$t('MerchantApplication.application')}}</span></div>
			<div>
				<wsPanel > 
					<template slot="panel_head_title">{{$t('MerchantApplication.ApplicationInfo')}}</template>
					<div slot="panel_body" class="ws-form-div" >
						<div class="ws-form-div-form" v-if="result.code != 0">
							<div class="errorMsg" v-if="result.code != 0">
								<span v-text="result.message"></span>
							</div>
							<!-- <Form ref="form" :model="form.model"  :rules="form.rules"  :label-width="100"> -->
							<Form ref="form" :model="form.model"  :label-width="100">
								<FormItem :label="$t('MerchantApplication.applicant')" prop="linkman">
									<Input v-model="form.model.linkman"/>
								</FormItem>
								<FormItem :label="$t('MerchantApplication.Country')" prop="country">
									<Select v-model="form.model.country" @on-change="selectCountry">
										<Option v-for="item in countryList" :value="item.id" :key="item.id">{{ item.name }}</Option>
									</Select>
								</FormItem>
								<FormItem :label="$t('MerchantApplication.phoneNumber')" prop="telephone">
									<Input v-model="form.model.telephone">
										<span slot="prepend">+{{countryCode}}</span>
									</Input>
								</FormItem>
								<FormItem :label="$t('MerchantApplication.mailbox')" prop="email">
									<Input v-model="form.model.email"/>
								</FormItem>
								<!-- <FormItem :label="$t('MerchantApplication.identificationNumber')" prop="idNumber">
									<Input v-model="form.model.idNumber"/>
								</FormItem> -->
								<!-- <FormItem :label="$t('MerchantApplication.StoreName')" prop="shop">
									<Input v-model="form.model.shop"/>
								</FormItem> -->
								<FormItem :label="$t('MerchantApplication.CurrencyType')" prop="currencyType">
									<Select v-model="form.model.currencyType">
										<Option v-for="item in currencyList" :value="item.type" :key="item.type">{{ item.type }}|{{ item.symbol }}</Option>
									</Select>
								</FormItem>
								<!-- <FormItem label="货币类型" prop="currencyType">
									<Input v-model="form.model.country"></Input>
								</FormItem> -->
								
								<FormItem :label="$t('MerchantApplication.area')" prop="area">
									<Input type="text" v-model="form.model.area"></Input>
								</FormItem>
								<FormItem :label="$t('MerchantApplication.location')" prop="location">
									<Input type="text" v-model="form.model.location" ></Input>
								</FormItem>
								<!--
								<FormItem :label="$t('MerchantApplication.companyName')" prop="company">
									<Input v-model="form.model.company"/>
								</FormItem>
								<FormItem :label="$t('MerchantApplication.companyAddress')" prop="location">
									<Input v-model="form.model.location"/>
								</FormItem> -->
								<!-- <FormItem :label="$t('MerchantApplication.businessLicense')" required> -->
									<!-- <ws-upload-cos ref="upload" catelog="merchants" :cfile-key="form.upload.fileKey" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="uploadSuccess" type="drag">
										<div style="padding: 20px 0" v-if="form.model.licenseUrl == ''">
											<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
											<p>{{$t('MerchantApplication.selectImage')}}</p>
										</div>
										<div style="padding: 0px 0; width: 200px; height: 250px" v-if="form.model.licenseUrl != ''">
											<img :src="form.model.licenseUrl" style="width: 200px; height: 250px" />
										</div>
									</ws-upload-cos> -->
									<!-- <Upload type="drag" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="uploadFile">									
										<div style="padding: 20px 0">
											<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
											<p>Click or drag files here to upload</p>
										</div>
									</Upload> -->
									<!-- <input type="file" id="file-selector"/> -->
									<!-- <input class="selImg" type="file" id="file" @change="handleFiles" ref="file"> -->


								<!-- </FormItem>	 -->
								<FormItem>
									<Button type="primary" @click="saveForm">{{$t('MerchantApplication.submitApplication')}}</Button>
									<Button @click="goBack">{{$t('MerchantApplication.returnLoginPage')}}</Button>
								</FormItem>
							</Form>
						</div>

						<div v-if="result.code == 0" style="text-align: center">
							<p style="font-size: 23px;padding-bottom: 30px;">{{$t('MerchantApplication.submitSuccessMessages')}}</p>
							<Button @click="goBack">{{$t('MerchantApplication.returnLoginPage')}}</Button>
						</div>
					</div>
				</wsPanel>
			</div>

		</div>
		
	</div>
</template>

<script>
	import COS from 'cos-js-sdk-v5';
	export default {
		data() {
			return {
				countryCode:'',
				currencyList: [],
				countryList: [],
				form: {
					model: {
						linkman: "", //申请人
						telephone: "", //手机号
						email: "", //邮箱
						idNumber: "",
						shop: "",
						currencyType: "",  //货币类型
						company: "",
						licenseUrl: "",
						country: "", //国家
						location: "", //公司地址
						area:"" //所在地区
					},
					rules: {
						linkman: [{
								required: true,
								message: "申请人不能为空",
								trigger: "blur"
							},
							{
								max: 32,
								message: "申请人长度不能大于32位",
								trigger: "blur"
							}
						],
						telephone: [{
								required: true,
								message: "手机号不能为空",
								trigger: "blur"
							},
							{
								max: 32,
								message: "手机号长度不能大于32位",
								trigger: "blur"
							}
						],
						email: [{
								required: true,
								message: "邮箱地址不能为空",
								trigger: "blur"
							},
							{
								type: "email",
								message: "输入格式不正确",
								trigger: "blur"
							}
						],
						idNumber: [{
								required: true,
								message: "身份证号不能为空",
								trigger: "blur"
							},
							{
								max: 32,
								message: "身份证号长度不能大于32位",
								trigger: "blur"
							}
						],
						shop: [{
								required: true,
								message: "店铺名称不能为空",
								trigger: "blur"
							},
							{
								max: 32,
								message: "店铺名称长度不能大于32位",
								trigger: "blur"
							}
						],
						currencyType: [{
							required: true,
							message: "货币类型必须设置"
						}],
						company: [{
								required: true,
								message: "公司名称不能为空",
								trigger: "blur"
							},
							{
								max: 64,
								message: "公司名称长度不能大于64位",
								trigger: "blur"
							}
						],
						country: [{
							required: true,
							message: "所在国家必须设置"
						}],
						location: [{
								required: true,
								message: "地址不能为空",
								trigger: "blur"
							},
							{
								max: 64,
								message: "地址长度不能大于64位",
								trigger: "blur"
							}
						],
						area:[{
							required: true,
							message: "地区不能为空",
							trigger: "blur"
						},{
							max: 64,
							message: "地区长度不能大于64位",
							trigger: "blur"
						}]

					},
					
					upload: {
						fileKey: ""
					}
				},
				result: {
					code: -1,
					message: ""
				},
				getCurrentLanguage:'',
			
			};
		},
		computed: {},
		mounted() {
			this.init();
			// 当前选择的语言版本
			this.getCurrentLanguage=localStorage.getItem('currentLanguage');
			this.$i18n.locale=this.getCurrentLanguage;
			if(this.$i18n.locale=='en'){
				this.form.rules={
					linkman: [{
							// required: true,
							message: "Applicant cannot be empty",
							trigger: "blur"
						},
						{
							max: 32,
							message: "Applicant cannot be longer than 32",
							trigger: "blur"
						}
					],
					telephone: [{
							//required: true,
							message: "Phone number cannot be empty",
							trigger: "blur"
						},
						{
							max: 32,
							message: "The phone number cannot be longer than 32 digits",
							trigger: "blur"
						}
					],
					email: [{
							//required: true,
							message: "Email address cannot be empty",
							trigger: "blur"
						},
						{
							type: "email",
							message: "Input format is incorrect",
							trigger: "blur"
						}
					],
					idNumber: [{
							//required: true,
							message: "ID number cannot be empty",
							trigger: "blur"
						},
						{
							max: 32,
							message: "ID card length cannot be greater than 32 digits",
							trigger: "blur"
						}
					],
					shop: [{
							//required: true,
							message: "Store name cannot be empty",
							trigger: "blur"
						},
						{
							max: 32,
							message: "Store name cannot be longer than 32 digits",
							trigger: "blur"
						}
					],
					currencyType: [{
						//required: true,
						message: "Currency type must be set"
					}],
					company: [{
							required: true,
							message: "Company name cannot be empty",
							trigger: "blur"
						},
						{
							max: 64,
							message: "Company name cannot be longer than 64 digits",
							trigger: "blur"
						}
					],
					country: [{
						//required: true,
						message: "Country must be set"
					}],
					location: [{
							//required: true,
							message: "Address cannot be empty",
							trigger: "blur"
						},
						{
							max: 64,
							message: "Address length cannot be greater than 64 bits",
							trigger: "blur"
						}
					],
					area:[{
						//required: true,
						message: "Area cannot be empty",
						trigger: "blur"
					},{
						max: 64,
						message: "The length of the area cannot be greater than 64",
						trigger: "blur"
					}]

				}
			}else if(this.$i18n.locale=='it'){
				this.form.rules={
					linkman: [{
							// required: true,
							message: "Applicant cannot be empty",
							trigger: "blur"
						},
						{
							max: 32,
							message: "Applicant cannot be longer than 32",
							trigger: "blur"
						}
					],
					telephone: [{
							//required: true,
							message: "Phone number cannot be empty",
							trigger: "blur"
						},
						{
							max: 32,
							message: "The phone number cannot be longer than 32 digits",
							trigger: "blur"
						}
					],
					email: [{
							//required: true,
							message: "Email address cannot be empty",
							trigger: "blur"
						},
						{
							type: "email",
							message: "Input format is incorrect",
							trigger: "blur"
						}
					],
					idNumber: [{
							//required: true,
							message: "ID number cannot be empty",
							trigger: "blur"
						},
						{
							max: 32,
							message: "ID card length cannot be greater than 32 digits",
							trigger: "blur"
						}
					],
					shop: [{
							//required: true,
							message: "Store name cannot be empty",
							trigger: "blur"
						},
						{
							max: 32,
							message: "Store name cannot be longer than 32 digits",
							trigger: "blur"
						}
					],
					currencyType: [{
						//required: true,
						message: "Currency type must be set"
					}],
					company: [{
							required: true,
							message: "Company name cannot be empty",
							trigger: "blur"
						},
						{
							max: 64,
							message: "Company name cannot be longer than 64 digits",
							trigger: "blur"
						}
					],
					country: [{
						//required: true,
						message: "Country must be set"
					}],
					location: [{
							//required: true,
							message: "Address cannot be empty",
							trigger: "blur"
						},
						{
							max: 64,
							message: "Address length cannot be greater than 64 bits",
							trigger: "blur"
						}
					],
					area:[{
						//required: true,
						message: "Area cannot be empty",
						trigger: "blur"
					},{
						max: 64,
						message: "The length of the area cannot be greater than 64",
						trigger: "blur"
					}]
				}	
			}




		},
		methods: {
			init() {
				this.initCurrency();
				this.initCountry();
			},
			initCurrency() {
				let _this = this;
				this.axios.get("/woauth/s/currencies").then(response => {	
					var res = response.data;
					console.log(res);
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						this.currencyList = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			initCountry() {
				let _this = this;
				this.axios.get("/woauth/ops/areas/states/"+localStorage.getItem('currentLanguage')).then(response => {	
					var res = response.data;
					console.log(res);
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						this.countryList = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			selectCountry(){
				let currentCountryList=this.countryList;

				let currentCountryId=this.form.model.country;

				for(var i=0;i<currentCountryList.length;i++){

					if(currentCountryList[i].id==currentCountryId){

						this.countryCode=currentCountryList[i].code;
					}
					
				}				

			},
			saveForm() {	
				console.log(1);
				this.$refs["form"].validate(valid => {
					if(valid) {
						if(this.form.model.linkman==''||this.form.model.country==''||this.form.model.telephone==''||this.form.model.email==''||this.form.model.currencyType==''
						||this.form.model.area==''||this.form.model.location==''){
							if(this.$i18n.locale=='zh'){
								this.$Message.info('还有未填写的信息');
							}else if(this.$i18n.locale=='en'){
								this.$Message.info('There are still unfilled information');
							}else if(this.$i18n.locale=='it'){
								this.$Message.info('Ci sono ancora informazioni non soddisfatte');
							}							
							return;							
							
						}
						this.submitForm();
					}
				});
				
			},
			submitForm() {
				const _this = this;
				let postData_ = this.form.model;
				console.log(postData_);
				this.axios
					.post("/woauth/api/ms/merchantApplyRecord", postData_)
					.then(function(response) {
						let res = response.data;
						if(0 === res.meta.code) {
							_this.result.code = 0;
							if(_this.$i18n.locale=='zh'){
								_this.$Message.success("提交申请成功");
							}else if(_this.$i18n.locale=='en'){
								_this.$Message.success("Submit your application successfully");
							}else if(_this.$i18n.locale=='it'){
								_this.$Message.success("Invia la tua richiesta con successo");
							}		
							
						} else {
							let message_ = res.meta.message;
							_this.result.message = message_;

							if(_this.$i18n.locale=='zh'){
								_this.$Message.warning("新增失败");
							}else if(_this.$i18n.locale=='en'){
								_this.$Message.warning("New failure");
							}else if(_this.$i18n.locale=='it'){
								_this.$Message.warning("Nuovo fallimento");
							}		
							
						}
					});
			},
			uploadSuccess(response, file, fileList) {
				if(0 == response.meta.code) {
					this.form.model.licenseUrl = response.data.pubFileUrl;
					this.form.upload.fileKey = response.data.fileId;
				}
			},
			goBack() {
				window.location.href = "./login.html";
			},

			handleFiles () {				
				let list = this.$refs.file.files;
				this.file=list[0];		
			},
			// 修改图片上传
			uploadFile(){	
				// 初始化实例
				// var cos = new COS({
				// 	getAuthorization: function (options, callback) {
				// 		// 异步获取签名
				// 		this.axios.get('/woauth/ws/auth/key', {
				// 			bucket: options.Bucket,
				// 			region: options.Region,
				// 		}, function (data) {
				// 			console.log(data);
				// 		});
				// 	}
				// });
				
				// var config = {
				// 	Bucket: 'allsale-dev-1256326697',//存储桶
				// 	Region: 'ap-guangzhou',//地域
				// 	SecretId: 'AKID2M2g91oKl1BAycQYm4HI7rZ7UfGjtxJU',
				// 	SecretKey: '98woV0KaknmeL1dDi3CC6ygDZkjMwOo4', //replace with yours
				// }
				var cos = new COS({
					getAuthorization: function (params, callback) {
						// 异步获取签名
						var authorization = COS.getAuthorization({
							SecretId: config.SecretId,
							SecretKey: config.SecretKey,
							Method: params.Method,
							Key: params.Key
							});
						callback(authorization);
					}
				});

				cos.sliceUploadFile({
					Bucket: config.Bucket,
					Region: config.Region,
					Key:'/pic/'+this.file.name, //上传的文件夹和图片名称
					Body: this.file,  //要上传的文件
					onProgress: function (progressData) {   
					/* 上传进度 */
						console.log(progressData)
					}
				}, function (err, data) {
					console.log(err, data);
					this.form.model.licenseUrl=data.Location; //保存上传图片成功后返回的地址
					// 上传成功返回url 
					// 需要清空上传控件，方法见下一步

				});	


			}
		}
	};
</script>

<style>
	html,
	body {
		overflow: auto !important;
	}
	
	.title {
		font-size: 20px;
		text-align: center;
		padding: 15px;
	}
	
	.errorMsg {
		padding-bottom: 20px;
		color: red;
		text-align: center;
		font-size: 18px;
	}
</style>